<template>
  <div class="video-actions">
    <!-- 用户头像 -->
    <div
      v-if="showUser && short.memberUser"
      class="action-icon"
      @click.stop="navigateToUser"
      @touchstart.stop="navigateToUser"
    >
      <el-avatar :src="short.memberUser.avatar" :size="40" class="avatar-with-border">
        {{ short.memberUser.nickName?.charAt(0) || 'U' }}
      </el-avatar>
    </div>

    <!-- 点赞按钮 -->
    <div class="action-icon" @click.stop="handleLikeClick" @touchstart.stop="handleLikeClick">
      <i
        class="action-icon-heart"
        :class="userStatus?.isLike ? 'i-carbon-favorite-filled text-red-500' : 'i-carbon-favorite'"
      ></i>
      <span>{{ formatCount(short.likes || 0) }}</span>
    </div>

    <!-- 收藏按钮 -->
    <div class="action-icon" @click.stop="handleCollectionClick" @touchstart.stop="handleCollectionClick">
      <i
        class="action-icon-star"
        :class="userStatus?.isCollection ? 'i-carbon-star-filled text-yellow-400' : 'i-carbon-star'"
      ></i>
      <span>{{ formatCount(short.collection || 0) }}</span>
    </div>

    <!-- 评论按钮 -->
    <div v-if="showComments" class="action-icon">
      <i class="i-carbon-chat"></i>
      <span>{{ formatCount(short.comments || 0) }}</span>
    </div>

    <!-- 分享按钮 -->
    <div v-if="showShare" class="action-icon">
      <i class="i-carbon-share"></i>
      <span>{{ formatCount(short.shareCount || 0) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  short: {
    shortId: number
    likes?: number
    collection?: number
    comments?: number
    shareCount?: number
    memberUser?: {
      memberUserId: number
      avatar: string
      nickName: string
    }
  }
  showUser?: boolean
  showComments?: boolean
  showShare?: boolean
  initialStatus?: {
    isLike: boolean
    isCollection: boolean
  }
}

const props = withDefaults(defineProps<Props>(), {
  showUser: true,
  showComments: true,
  showShare: true,
  initialStatus: () => ({
    isLike: false,
    isCollection: false
  })
})

const emit = defineEmits(['update:status'])

const router = useRouter()
const { handleLike, handleCollection } = useShortActions()

// 用户状态
const userStatus = ref({
  isLike: props.initialStatus?.isLike || false,
  isCollection: props.initialStatus?.isCollection || false
})

// 监听初始状态变化
watch(
  () => props.initialStatus,
  (newStatus) => {
    if (newStatus) {
      userStatus.value = { ...newStatus }
      emit('update:status', userStatus.value)
    }
  },
  { immediate: true }
)

// 格式化数字
const formatCount = (count: number) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + 'w'
  }
  if (count >= 1000) {
    return (count / 1000).toFixed(1) + 'k'
  }
  return count.toString()
}

// 跳转到用户页
const navigateToUser = () => {
  if (props.short.memberUser) {
    router.push(`/shorts/user/${props.short.memberUser.memberUserId}`)
  }
}

// 处理点赞点击
const handleLikeClick = async (e: Event) => {
  e.preventDefault()
  e.stopPropagation()
  await handleLike(e, props.short, userStatus.value)
  emit('update:status', userStatus.value)
}

// 处理收藏点击
const handleCollectionClick = async (e: Event) => {
  e.preventDefault()
  e.stopPropagation()
  await handleCollection(e, props.short, userStatus.value)
  emit('update:status', userStatus.value)
}
</script>

<style scoped>
.video-actions {
  position: absolute;
  bottom: 80px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 10;
}

.action-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s;
  color: white;
}

.action-icon:hover {
  transform: scale(1.1);
}

.action-icon i {
  font-size: 28px;
  opacity: 0.9;
  transition: all 0.2s;
}

.action-icon span {
  font-size: 12px;
  opacity: 0.8;
  color: white;
}

.avatar-with-border {
  border: 2px solid #fff;
}

.action-icon-heart,
.action-icon-star {
  font-size: 28px;
}

/* 动画效果 */
@keyframes bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate-bounce {
  animation: bounce 1s ease;
}
</style>
